ドーナツとパイ

円グラフとドーナツグラフは、おそらく最もよく使用されるグラフです。これらはセグメントに分割されており、各セグメントの円弧は各データの比例値を示します。

データ間の関係の比率を示すことに優れています。

円グラフとドーナツグラフは、Chart.js では事実上同じクラスですが、デフォルト値が 1 つ異なります。cutoutPercentage。これは、内側の何パーセントを切り取る必要があるかに相当します。これはデフォルトで0円グラフの場合、および50ドーナツ用に。

これらは、次の 2 つのエイリアスでも登録されています。Chart芯。デフォルト値と別名が異なることを除けば、それらはまったく同じです。

使用例

// For a pie chart
var myPieChart = new Chart(ctx, {
    type: 'pie',
    data: data,
    options: options
});

// And for a doughnut chart
var myDoughnutChart = new Chart(ctx, {
    type: 'doughnut',
    data: data,
    options: options
});

データセットのプロパティ

ドーナツ/円グラフを使用すると、データセットごとに多数のプロパティを指定できます。これらは、特定のデータセットの表示プロパティを設定するために使用されます。たとえば、データセットの円弧の色は通常、このように設定されます。

名前	タイプ	スクリプト可能	インデックス可能	デフォルト
`backgroundColor`	`Color`	はい	はい	`'rgba(0, 0, 0, 0.1)'`
`borderAlign`	`string`	はい	はい	`'center'`
`borderColor`	`Color`	はい	はい	`'#fff'`
`borderWidth`	`number`	はい	はい	`2`
`data`	`number[]`	-	-	必要
`hoverBackgroundColor`	`Color`	はい	はい	`undefined`
`hoverBorderColor`	`Color`	はい	はい	`undefined`
`hoverBorderWidth`	`number`	はい	はい	`undefined`
`weight`	`number`	-	-	`1`

スタイリング

各円弧のスタイルは、次のプロパティで制御できます。

名前	説明
`backgroundColor`	円弧の背景色。
`borderColor`	円弧の境界線の色。
`borderWidth`	円弧の境界線の幅 (ピクセル単位)。
`weight`	データセットの相対的な厚さ。重みの値を指定すると、すべてのデータセットの重み値の合計に相対した厚さで円またはドーナツデータセットが描画されます。

これらすべての値がundefined、関連付けられたものへのフォールバックelements.arc.*オプション。

境界線の配置

次の値がサポートされていますborderAlign。

'center'（デフォルト）
'inner'

いつ'center'を設定すると、隣り合う円弧の境界線が重なり合います。いつ'inner'が設定されている場合、すべての境界線が重ならないことが保証されます。

インタラクション

各アークとの相互作用は、次のプロパティで制御できます。

名前	説明
`hoverBackgroundColor`	ホバー時の円弧の背景色。
`hoverBorderColor`	ホバーしたときの円弧の境界線の色。
`hoverBorderWidth`	ホバーしたときの円弧の境界線の幅 (ピクセル単位)。

これらすべての値がundefined、関連付けられたものへのフォールバックelements.arc.*オプション。

設定オプション

これらは、円グラフとドーナツグラフに固有のカスタマイズオプションです。これらのオプションは、グローバルチャート構成オプションとマージされ、チャートのオプションを形成します。

名前	タイプ	デフォルト	説明
`cutoutPercentage`	`number`	`50`- ドーナツの場合、`0`- パイ用	グラフの中央から切り取られる割合。
`rotation`	`number`	`-0.5 * Math.PI`	円弧を描く開始角度。
`circumference`	`number`	`2 * Math.PI`	円弧がカバーできるようにスイープします。
`animation.animateRotate`	`boolean`	`true`	true の場合、チャートは回転アニメーションでアニメーション化されます。この物件は`options.animation`物体。
`animation.animateScale`	`boolean`	`false`	true の場合、グラフを中心から外側に拡大縮小するアニメーションが表示されます。

デフォルトのオプション

作成されるドーナツタイプごとにこれらのデフォルト値を変更することもできます。このオブジェクトは次の場所で入手できます。Chart.defaults.doughnut。円グラフには、これらのデフォルトのクローンもあり、変更できます。Chart.defaults.pie唯一の違いは、cutoutPercentage0に設定されています。

データ構造

円グラフの場合、データセットにはデータポイントの配列が含まれている必要があります。データポイントは数値である必要があり、Chart.js はすべての数値を合計し、それぞれの相対的な割合を計算します。

ツールヒントが正しく表示されるように、ラベルの配列を指定する必要もあります。

data = {
    datasets: [{
        data: [10, 20, 30]
    }],

    // These labels appear in the legend and in the tooltips when hovering different arcs
    labels: [
        'Red',
        'Yellow',
        'Blue'
    ]
};

ドーナツ＆パイ